<template>

	<view class="v1">
		<!-- <image src="../../static/登录页面.jpeg" class="beijing"></image> -->
		<!-- v2父容器  子view使用绝对布局 -->
		<view class="v2">
			<view class="dltext">登录</view>

			<!-- 手机号 -->
			<view class="acount">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/icons_accout.png" class="ph"></image>
				<input placeholder="请输入账号" v-model="username" />
			</view>

			<!-- 密码 -->
			<view class="passwordCs">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/password.png" class="ps"></image>
				<input type="password" v-model="password" placeholder="登录密码" v-if="inputType" />

				<input type="text" v-model="password" placeholder="登录密码" v-if="!inputType" />
				<image class="eye" :src="inputType ? require('static/img/no_eye.png') :require('static/img/eye.png')"
					mode="widthFix" @click="changePw"></image>

			</view>

			<!-- 注册 和忘记密码  -->
			<view class="zhuce">
				<navigator url="../register/register">立即注册</navigator>
				<navigator url="../forgetPassoword/forgetPassoword">忘记密码?</navigator>
			</view>

			<!-- 登录按钮 -->
			<view class="denglu">
				<button class="btn-dl" type="primary" @click="doLogin">登录</button>
			</view>

			<!-- 协议区  xieyi -->
			<view class="xieyi">
				<checkbox-group @change="checkboxChange" class="agreement_radio">
					<checkbox class="isXY" :value='checkVal' :checked="checked" @change="checkboxChange"></checkbox>
				</checkbox-group>

				<view class="text-xy">同意小程序的《使用协议》</view>
			</view>
		</view>

		<!-- 提示框  使用以下方式登录 -->
		<view class="v3">
			<view class="line"></view>
			<view class="lText">您还可以使用以下方式登录</view>
			<view class="line"></view>
		</view>

		<!-- qq  weixin  weibo 图标展示view -->
		<view class="qwwIcon">
			<navigator url="../loginByWx/loginByWx">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/weixin.png"></image>
			</navigator>
			<navigator>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/qq.png"></image>
			</navigator>
			<navigator>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/weibo.png"></image>
			</navigator>
		</view>

	</view>


</template>

<script>
	
	export default {
		data() {
			return {
				checkVal:'0',
				inputType: true, //显示密码
				password: '',
				username: '',
				checked: false
			};
		},
		methods: {
			checkboxChange(e) {
				if (e.detail.value == '0') {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			changePw() {
				let pw = this.password
				this.inputType = !this.inputType;
				this.$nextTick(() => {
					this.password = pw
				})

			},
			async doLogin() {
				var that = this;
				if (that.username.length == 0 || that.password.length == 0) { //校验非空
					wx.showToast({ //弹框提示
						icon: 'none',
						title: '登录账号或密码不能为空！',
						duration: 2000,
					})
				} else if (!this.checked) { //勾选协议
					wx.showToast({ //弹框提示
						icon: 'none',
						title: '请勾选用户服务协议',
						duration: 2000,
					})
				} else {
					let params = {
						username: that.username,
						password: that.password,
					};
					const res = await uni.$http.post('login',params);
					if (res.data.code == "200") {
						if(res.data.data.userStatus==1){
							wx.setStorageSync('username', res.data.data.username);
							wx.setStorageSync('userNickname', res.data.data.userNickname);
							wx.setStorageSync('userAvatar', res.data.data.userAvatar);
							// 存入缓存
						
							wx.setStorage({
								key: "usersex",
								data: res.data.data.userSex,
								success: function() {
									wx.switchTab({
										url: '/pages/home/home'
									});
								}
							});
						}else{
							wx.showToast({
								icon: 'none',
								title: "您的用户未激活，登录失败",
								duration: 2000,
							})
						}
						
					} else {
						wx.showToast({
							icon: 'none',
							title: "用户名或者密码错误，登录失败",
							duration: 2000,
						})
					}
				}
			},
		
		},
	}
</script>

<style lang="scss">
	// .beijing{
	// 		margin-top: 30rpx;
	// 		margin-left: 80rpx;
	// 		display:flex;
	// 		justify-content: center;
	// 		width: 80%;
	// 		box-shadow: 5rpx 5rpx 5rpx 5rpx #999999;
	// }

	/* 最大的父元素 */
	.v1 {
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		background: #356363;
		/* 换图片 */

	}

	/* 白色区域 */
	.v1 .v2 {
		position: relative;
		margin-top: 150rpx;
		left: 100rpx;
		width: 545rpx;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
	}

	/* 白色区域内的登录文本 */
	.v1 .v2 .dltext {
		margin-top: 50rpx;
		position: absolute;
		margin-left: 80rpx;
		width: 150rpx;
		height: 100rpx;
		font-size: 60rpx;
		font-family: Helvetica;
		color: #000000;
		line-height: 100rpx;
		letter-spacing: 2rpx;
	}

	/* 账号+输入框+下划线的父容器view */
	.v1 .v2 .acount {
		margin-top: 200rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 账号图标 */
	.v1 .v2 .acount .ph {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 账户输入框 */
	.v1 .v2 .acount input {
		width: 200rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 密码图标+输入框+小眼睛图标+下划线父容器view */
	.v1 .v2 .passwordCs {
		margin-top: 400rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 密码图标 */
	.v1 .v2 .passwordCs .ps {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 眼睛 图标*/
	.v1 .v2 .passwordCs .eye {
		margin-top: 5rpx;
		margin-left: 65rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 密码输入框 */
	.v1 .v2 .passwordCs input {
		width: 200rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 注册+忘记密码父容器 */
	.v1 .v2 .zhuce {
		font-size: 25rpx;
		margin-left: 85rpx;
		width: 370rpx;
		margin-top: 540rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
	}

	/* 登录按钮容器view */
	.v1 .v2 .denglu {
		width: 350rpx;
		height: 50rpx;
		position: absolute;
		margin-top: 600rpx;
		margin-left: 85rpx;

	}

	/* 登录按钮 */
	.v1 .v2 .denglu button {
		padding: 0rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	/* 复选框+协议文字容器view */
	.v1 .v2 .xieyi {
		margin-left: 10rpx;
		margin-top: 680rpx;
		width: 400rpx;
		display: flex;
		position: absolute;
	}

	/* 复选框 */
	.v1 .v2 .xieyi .isXY {
		margin-left: 85rpx;
		/* 修改复选框的大小 */
		transform: scale(.6);
	}

	/* 协议文本 */
	.v1 .v2 .xieyi .text-xy {
		margin-left: 10rpx;
		margin-top: 20rpx;
		color: #000000;
		font-size: 18rpx;
	}

	/* 提示文本 */
	.v3 {
		padding-left: 100rpx;
		display: flex;
		position: relative;
		width: 100%;
		height: 60rpx;
		padding-top: 50rpx;
	}

	.v3 .line {
		margin-left: 5rpx;
		margin-top: 18rpx;
		width: 120rpx;
		height: 3rpx;
		background-color: #FFFFFF;
	}

	.v3 .lText {
		color: #FFFFFF;
		font-size: 25rpx;
	}

	/* qq wx wb */
	.qwwIcon {
		margin-top: 20rpx;
		padding-top: 50rpx;
		position: relative;
		display: flex;
		width: 100%;
		height: 150rpx;
	}

	.qwwIcon image {
		padding-left: 150rpx;
		width: 50rpx;
		height: 50rpx;
	}
</style>
